<template>
  <el-container style="border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-menu :default-openeds="['1', '3']">
        <el-submenu index="1">
          <template slot="title"><i class="el-icon-message"></i>导航一</template>
          <el-menu-item-group>
            <template slot="title">分组一</template>
            <el-menu-item index="1-1">选项1</el-menu-item>
            <el-menu-item index="1-2">选项2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="1-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="1-4">
            <template slot="title">选项4</template>
            <el-menu-item index="1-4-1">选项4-1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title"><i class="el-icon-menu"></i>导航二</template>
          <el-menu-item-group>
            <template slot="title">分组一</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="2-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="2-4">
            <template slot="title">选项4</template>
            <el-menu-item index="2-4-1">选项4-1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title"><i class="el-icon-setting"></i>导航三</template>
          <el-menu-item-group>
            <template slot="title">分组一</template>
            <el-menu-item index="3-1">选项1</el-menu-item>
            <el-menu-item index="3-2">选项2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="3-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="3-4">
            <template slot="title">选项4</template>
            <el-menu-item index="3-4-1">选项4-1</el-menu-item>
          </el-submenu>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-dropdown>
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>个人中心</el-dropdown-item>
            <el-dropdown-item>退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span>王小虎</span>
      </el-header>

      <el-main>
        <el-form :inline="true">
          <el-form-item>
            <el-button icon="el-icon-plus" type="primary" @click="addUser()">新增</el-button>
          </el-form-item>
        </el-form>

        <div class="avue-crud__search">
          <el-form :model="dataForm" label-width="100px">
            <el-row>
              <el-col :span="7">
                <el-form-item label="姓名：" prop="name">
                  <el-input v-model="dataForm.name" placeholder="请输入" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                  <el-button type="primary" icon="el-icon-search" @click="init()" style="margin-left: 30px;">查询</el-button>
              </el-col>
            </el-row>
          </el-form>
        </div>

        <el-table :data="tableData">
          <el-table-column prop="name" label="姓名"/>
          <el-table-column prop="path" label="地址"/>
          <el-table-column prop="type" label="类型"/>
          <el-table-column prop="sort" label="排序"/>
          <el-table-column
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleUpdate(scope.row.id)">更改</el-button>
              <el-button type="text" size="small" @click="handleDel(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          @size-change="sizeChange"
          @current-change="currentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20]"
          :page-size="pageSize"
          :total="total"
          background
          layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
const Op = require('sequelize').Op;
import {Menu} from '../dbs/models/index.js'

  export default {
    data() {
      return {
        tableData: [],
        pageSize: 10,
        currentPage: 1,
        total: 110,
        dataForm: {},
      }
    },
    created() {
      this.init()
    },
    methods: {
      async init(){
        var where = {}
        var name = this.dataForm.name
        if(name) {
          where.name = {
            [Op.like]: `%${name}%`
          }
        }
        let result = await Menu.findAndCountAll({
          order: [['sort']],
          where: where,
          offset: (this.currentPage - 1) * this.pageSize,
          limit: this.pageSize
        })
        this.tableData = result.rows
        this.total = result.count
      },
      sizeChange(val) {
        this.currentPage = 1
        this.pageSize = val
        this.init()
      },
      currentChange(val) {
        this.currentPage = val
        this.init()
      },
      // 增
      async addUser(){
        let _this = this
       /* let user = this.$sequelize.model('user');*/
        await Menu.create({
          username:'wangerxiao'
        }).then(function (result) {
          console.log("插入成功"+result);
          _this.init()
        }).catch(function (err) {
          console.log("插入失败"+err);
        })
      },
      // 删
      async handleDel(id) {
        let _this = this
      /*  let user = this.$sequelize.model('user');*/
        Menu.destroy({where:{id:id}}).then(function (result) {
          _this.init()
          console.log("delete success：" +result)
        }).catch(function (err) {
          console.log("delete fail："+ err)
        })
      },
      async handleUpdate(id) {
        let _this = this
        Menu.findOne({where: {id:id}}).then(
          function (user) {
            Menu.update({
              username:'wudalang'
            }, {
              where: {'id': id}
            }).then(function (result) {
              console.log("update success：" +result)
              _this.init()
            }).catch(function (err) {
              console.log("update fail："+ err)
            })
          }).catch(function (err) {
          console.log("无此用户")
        })
      }
    },
  };
</script>

<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>
